<template>
  <Layout>
    <Sider
      hide-trigger
      class="sider"
      style="
        width: 350px;
        min-width: 350px;
        padding: 10px;
        height: 100%;
      "
    >
      <div class="docName">
        医生姓名：
        <div>{{ docName }}</div>
      </div>
      <div>
        <Alert type="success">诊中患者</Alert>
        <Table
          highlight-row
          :columns="columns1"
          :data="data1"
          height="250"
        ></Table>
      </div>
      <div>
        <Alert>待诊患者</Alert>
        <Table
          :columns="columns2"
          :data="data2"
          @on-row-click="clickTable2"
          height="300"
        ></Table>
      </div>
    </Sider>
    <Content class="content">
      <div class="hzInfo">
        当前病人：
        <div>姓名：{{ data1.length == 0 ? " " : data1[0].hzName }}</div>
        <div>就诊号：{{ data1.length == 0 ? " " : data1[0].hzNum }}</div>
        <div>
          性别：{{
            data1.length == 0 ? " " : data1[0].hzSix == "1" ? "男" : "女"
          }}
        </div>
        <div>年龄：{{ data1.length == 0 ? " " : data1[0].hzAge }}</div>
        <Button type="success" @click="consultationOk">诊毕</Button>
      </div>
      <Divider dashed />
      <Tabs type="card" v-model="tabNum">
        <TabPane label="病历首页" name="1">
          <div>
            <el-form
              ref="elForm"
              :model="formData"
              size="medium"
              label-width="100px"
            >
              <el-form-item label="主诉" prop="blChief">
                <el-input
                  v-model="formData.blChief"
                  type="textarea"
                  placeholder="请输入主诉"
                  :autosize="{ minRows: 2, maxRows: 2 }"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
              <el-form-item label="现病史" prop="blIllness">
                <el-input
                  v-model="formData.blIllness"
                  type="textarea"
                  placeholder="请输入现病史"
                  :autosize="{ minRows: 1, maxRows: 1 }"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
              <el-form-item label="现病诊疗情况" prop="blTreatment">
                <el-input
                  v-model="formData.blTreatment"
                  type="textarea"
                  placeholder="请输入现病诊疗情况"
                  :autosize="{ minRows: 1, maxRows: 1 }"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
              <el-form-item label="既病史" prop="blMedical">
                <el-input
                  v-model="formData.blMedical"
                  type="textarea"
                  placeholder="请输入既病史"
                  :autosize="{ minRows: 1, maxRows: 1 }"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
              <el-form-item label="过敏史" prop="blAllergies">
                <el-input
                  v-model="formData.blAllergies"
                  type="textarea"
                  placeholder="请输入过敏史"
                  :autosize="{ minRows: 1, maxRows: 1 }"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
              <el-form-item label="体格检查" prop="blPhysical">
                <el-input
                  v-model="formData.blPhysical"
                  type="textarea"
                  placeholder="请输入体格检查"
                  :autosize="{ minRows: 1, maxRows: 1 }"
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="发病时间" prop="blOnsettime">
                    <el-date-picker
                      v-model="formData.blOnsettime"
                      value-format="yyyy-MM-dd"
                      :style="{ width: '100%' }"
                      placeholder="请选择发病时间"
                      clearable
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item size="large">
                <el-button type="primary" @click="addMedicalList"
                  >确定</el-button
                >
                <el-button @click="resetForm">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </TabPane>
        <TabPane label="诊断信息" name="2">
          西医诊断（{{ dataDiagnosis.length }}）
          <Button type="primary" @click="modalIco = true">添加</Button>
          <Table :columns="columnsDiagnosis" :data="dataDiagnosis"></Table>
        </TabPane>
        <TabPane label="成药处方" name="3">
          <div class="prescriptionFather">
            <div class="prescriptionLeft">
              <div>
                药品目录
                <div class="inputRight">
                  <Input
                    v-model="drugindex"
                    size="small"
                    search
                    enter-button
                    @on-search="getDruglist"
                    placeholder="药品名称"
                  />
                </div>
              </div>
              <Table
                height="500"
                :columns="drugColumns"
                :data="drugData"
                @on-row-click="clickDrug"
              ></Table>
            </div>
            <div class="prescriptionRight">
              <div>
                <div>金额总计</div>
                <div>{{ drugMonge }}元</div>
              </div>
              <Table :columns="drugColumns1" :data="drugData1">
                <template slot-scope="{ index }" slot="action">
                  <InputNumber
                    size="small"
                    :min="0"
                    v-model="drugData1[index].num"
                    @on-change="inputChange"
                  ></InputNumber>
                </template>
                <template slot-scope="{ index }" slot="method">
                  <Input
                    v-model="drugData1[index].method"
                    :rows="1"
                    type="textarea"
                    placeholder="使用方法"
                    clearable
                  />
                </template>
              </Table>
            </div>
          </div>
        </TabPane>
      </Tabs>
      <Modal
        v-model="modalIco"
        title="ICD-10字典录入"
        @on-ok="icdOk"
        @on-cancel="icdCancel"
      >
        <el-row :gutter="5">
          <el-form
            ref="icdForm"
            :model="icdFormData"
            size="medium"
            label-width="100px"
          >
            <el-col :span="8">
              <el-form-item label="ICD编码" prop="icdId">
                <el-input
                  v-model="icdFormData.icdId"
                  placeholder="请输入ICD编码"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="助记码" prop="icdMnemonic">
                <el-input
                  v-model="icdFormData.icdMnemonic"
                  placeholder="请输入助记码"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item size="large">
                <el-button type="primary" @click="icdSubmitForm"
                  >搜索</el-button
                >
                <el-button @click="icdResetForm">重置</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <Table :columns="icdColumns" :data="icdData" height="350"></Table>
        <pagination
          class="pagTitle"
          v-show="total > 0"
          :total="total"
          :page.sync="icdFormData.pageNum"
          :limit.sync="icdFormData.pageSize"
          @pagination="icdSubmitForm"
        />
      </Modal>
    </Content>
  </Layout>
</template>
<script>
import { listUser, updateUser } from "@/api/qiantai/user";
import { getUserProfile } from "@/api/system/user";
import { addMedical } from "@/api/medical/Medical";
import { addPrescription } from "@/api/medicine/prescription";
import { listIcd } from "@/api/medical/icd";
import { listDruglist } from "@/api/medicine/druglist";
export default {
  data() {
    return {
      icdColumns: [
        {
          title: "ICD-10",
          key: "icdId",
        },
        {
          title: "拼音码",
          key: "icdMnemonic",
        },
        {
          title: "名称",
          key: "icdName",
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small",
                },
                on: {
                  click: () => {
                    this.addIco(params);
                  },
                },
              },
              "添加"
            );
          },
        },
      ],
      icdData: [],
      modalIco: false,
      tabNum: "1",
      formData: {},
      docName: null,
      columns1: [
        {
          title: "病历号",
          key: "hzNum",
          width: "150",
        },
        {
          title: "姓名",
          key: "hzName",
        },
        {
          title: "年龄",
          key: "hzAge",
        },
      ],
      data1: [],
      columns2: [
        {
          title: "病历号",
          key: "hzNum",
          width: "150",
        },
        {
          title: "姓名",
          key: "hzName",
        },
        {
          title: "年龄",
          key: "hzAge",
        },
      ],
      data2: [],
      columnsDiagnosis: [
        {
          title: "序号",
          type: "index",
          width: "80",
          align: "center",
        },
        {
          title: "ICD-10",
          key: "icdId",
        },
        {
          title: "疾病名称",
          key: "icdName",
        },
        {
          title: "确诊医生",
          key: "docName",
        },
        {
          title: "确诊时间",
          key: "blTime",
        },
      ],
      drugColumns: [
        {
          title: "药品名",
          key: "ypName",
        },
        {
          title: "价格(元)",
          width: "100",
          align: "center",
          key: "ypPrice",
        },
      ],
      total: 0,
      drugData: [],
      drugindex: null,
      dataDiagnosis: [],
      icdFormData: {
        pageNum:1,
        pageSize:10,
        icdId:null,
        icdMnemonic:null
      },
      drugColumns1: [
        {
          title: "操作",
          key: "action",
          width: "80",
          align: "center",
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small",
                },
                on: {
                  click: () => {
                    this.drugData1.splice(params.index, 1);
                    this.inputChange();
                  },
                },
              },
              "删除"
            );
          },
        },
        {
          title: "药品名",
          key: "ypName",
          width: "150",
          align: "center",
        },
        {
          title: "规格",
          key: "ypNorm",
          align: "center",
          width: "100"
        },
        {
          title: "单位",
          key: "ypUnit",
          width: "70",
          align: "center",
        },
        {
          title: "数量",
          key: "action",
          align: "center",
          width: "80",
          slot: "action",
        },
        {
          title: "使用方法",
          key: "action",
          align: "center",
          width: "170",
          slot: "method",
        },
      ],
      drugData1: [],
      drugMonge: 0,
    };
  },
  created() {
    getUserProfile().then((res) => {
      this.docName = res.data.nickName;
      this.$nextTick(() => {
        this.getHzlist();
      });
    });
    listIcd(this.icdFormData).then((res) => {
      this.icdData = res.rows;
      this.total = res.total;
      // console.log(this.icdData);
    });
    listDruglist().then((res) => {
      this.drugData = res.rows;
      // console.log(this.drugData);
    });
  },
  methods: {
    inputChange() {
      let sun = 0;
      this.drugData1.forEach((currentValue, index, array) => {
        sun += currentValue.num * currentValue.ypPrice;
      });
      this.drugMonge = Number(sun);
    },
    // 点击药品表
    clickDrug(res) {
      res.num = 1;
      if(this.drugData1.length<5){
        this.drugData1.push(res);
        this.drugMonge += Number(res.ypPrice);
      }else {
        this.$Message['warning']({
                    background: true,
                    content: '最多添加5条'
                });
      }
    },
    getDruglist() {
      listDruglist({ ypName: this.drugindex }).then((res) => {
        this.drugData = res.rows;
      });
    },
    // icd 查询
    icdSubmitForm() {
      listIcd(this.icdFormData).then((res) => {
        this.total=res.total;
        this.icdData = res.rows;
      });
    },
    // icd 查询条件重置
    icdResetForm() {
      this.$refs["icdForm"].resetFields();
      this.icdSubmitForm();
    },
    icdOk() {},
    icdCancel() {},
    // 西医诊断 添加按钮
    addIco(res) {
      if (this.dataDiagnosis.length < 5) {
        res.row.docName = this.docName;
        res.row.blTime = this.formatDate();
        this.dataDiagnosis.push(res.row);
      } else {
        this.$Message["warning"]({
          background: true,
          content: "最多添加五条！",
        });
      }
    },
    // 病历首页 确定按钮
    addMedicalList() {
      this.tabNum = "2";
      this.formData.blNum = this.data1[0].hzNum;
      this.formData.hzName = this.data1[0].hzName;
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    // 获取患者列表
    getHzlist() {
      // console.log(this.docName);
      let that = this;
      listUser({ hzDoc: this.docName, hzState: "0" }).then((res) => {
        // console.log(res);
        this.data2 = res.rows;
        listUser({ hzDoc: that.docName, hzState: "2" }).then((res1) => {
          that.data2.push(...res1.rows);
        });
      });
    },
    clickTable2(row, index) {
      this.data1.push(row);
      this.data2.splice(index, 1);
    },
    formatDate() {
      const dt = new Date();
      const yy = dt.getFullYear();
      let mm = dt.getMonth() + 1;
      mm = mm < 10 ? "0" + mm : mm;
      let dd = dt.getDate();
      dd = dd < 10 ? "0" + dd : dd;

      const day = dt.getDay();
      const arr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];

      let h = dt.getHours();
      h = h < 10 ? "0" + h : h;
      let m = dt.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = dt.getSeconds();
      s = s < 10 ? "0" + s : s;
      // return yy + '-' + mm + '-' + dd + ' ' + arr[day]
      return yy + "-" + mm + "-" + dd + " " + h + ":" + m + ":" + s;
    },
    consultationOk() {
      if (this.data1.length == 0) {
        this.$Message["warning"]({
          background: true,
          content: "请选择就诊患者",
        });
        return;
      } else {
        this.$confirm("该患者是否就诊完毕?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.formData.hzName = this.data1[0].hzName;
            this.formData.blNum = this.data1[0].hzNum;
            this.dataDiagnosis.forEach((currentValue, index, array) => {
              this.$set(this.formData, `blIcd${index}`, currentValue.icdName);
            });
            addMedical(this.formData);
            let drugFrom = {};
            drugFrom.hzName = this.data1[0].hzName;
            drugFrom.hzNum = this.data1[0].hzNum;
            this.drugData1.forEach((currentValue, index, array) => {
              this.$set(drugFrom, `ypName${index}`, currentValue.ypName);
              this.$set(drugFrom, `ypNorm${index}`, currentValue.ypNorm);
              this.$set(drugFrom, `num${index}`, currentValue.num);
              this.$set(drugFrom, `price${index}`, currentValue.ypPrice);
              this.$set(drugFrom, `method${index}`, currentValue.method);
            });
            addPrescription(drugFrom).then((res) => {});
            this.data1[0].hzState = "1";
            updateUser(this.data1[0]).then((res) => {
              if (res.code == 200) {
                this.$Message["success"]({
                  background: true,
                  content: "已诊毕",
                });
                this.data1.shift();
                this.drugData1 = [];
                this.dataDiagnosis = [];
                this.resetForm("elForm");
                this.drugMonge = 0;
                this.tabNum="1";
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      }
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.sider {
  background-color: #ffffff;
  .docName {
    font-size: 20px;
    height: 40px;
    margin-top: 5px;
    align-items: center;
    & > :first-child {
      font-size: 18px;
      display: inline-block;
      background-color: #049eff;
      border-radius: 3px;
      padding: 2px 5px;
      height: 28px;
    }
  }
}
.content {
  padding: 30px;
}
.hzInfo {
  font-size: 16px;
  display: flex;
  align-items: center;
  & > :first-child {
    display: inline-block;
    color: #049eff;
    width: 120px;
    border: 1px solid #049eff;
    border-radius: 3px;
    padding-left: 5px;
    margin-right: 10px;
  }
  & > :nth-child(2) {
    display: inline-block;
    color: #049eff;
    width: 200px;
    border: 1px solid #049eff;
    border-radius: 3px;
    padding-left: 5px;
    margin-right: 10px;
  }
  & > :nth-child(3) {
    display: inline-block;
    color: #049eff;
    width: 80px;
    border: 1px solid #049eff;
    border-radius: 3px;
    padding-left: 5px;
    margin-right: 10px;
  }
  & > :nth-child(4) {
    display: inline-block;
    color: #049eff;
    width: 80px;
    border: 1px solid #049eff;
    border-radius: 3px;
    padding-left: 5px;
    margin-right: 80px;
  }
}
.prescriptionFather {
  display: flex;
  justify-content: space-between;
}
.prescriptionLeft {
  width: 300px;
  & > :first-child {
    border: 1px solid #8ce6b0;
    background-color: #edfff3;
    height: 40px;
    width: 260px;
    padding: 8px;
    border-radius: 4px;
    color: #515a6e;
    font-size: 14px;
  }
  .inputRight {
    position: relative;
    width: 180px;
    top: -22px;
    left: 60px;
  }
}
.prescriptionRight {
  background-color: #ffffff;
  width: 750px;
  height: 540px;
  padding: 10px;
  border-radius: 5px;
  & > :first-child {
    display: flex;
    justify-content: flex-start;
    & > :nth-child(1) {
      border: 1px solid #8ce6b0;
      background-color: #edfff3;
      height: 38px;
      width: 80px;
      padding: 8px;
      border-radius: 4px;
      color: #515a6e;
      font-size: 14px;
      text-align: center;
    }
    & > :nth-child(2) {
      border: 1px solid #ffb08f;
      background-color: #ffefe6;
      padding: 8px;
      height: 38px;
      width: 80px;
      border-radius: 4px;
      color: #515a6e;
      font-size: 14px;
      text-align: center;
      margin-left: 10px;
    }
  }
}
::v-deep {
  .ivu-layout-sider {
    width: 400px;
    min-width: 400px;
    max-width: 200px;
    flex: 0 0 200px;
  }
  .ivu-divider-horizontal {
    margin: 15px 0;
  }
  .ivu-modal {
    width: 800px !important;
  }
  .ivu-input-number {
    width: 50px;
  }
  .ivu-input-number-input{
    z-index: 10;
  }
}
</style>
